<template>
	<view class="container">
		<image class="bg-img" src="http://tou-file.oss-cn-hangzhou.aliyuncs.com/icons/29.png"></image>
		<view class="content">
			<image class="logo" src="http://tou-file.oss-cn-hangzhou.aliyuncs.com/icons/27.png"></image>
			<view class="title">
				注册柔美吉 开启柔美新生
			</view>
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				
				<image class="photo" :src="avatarUrl || 'http://tou-file.oss-cn-hangzhou.aliyuncs.com/icons/28.png'">
				</image>
			</button>
			<view class="tips">
				点击上传头像
			</view>
			<view class="from">
				<view class="item">
					<view class="name">
						*用户名
					</view>
					<input type="nickname" v-module="nickName" placeholder="请输入昵称" @blur="onBlur" />
				</view>
				<view class="item">
					<view class="name">
						*手机号
					</view>
					<view v-if="phone" class="phone">
						{{phone}}
					</view>
					<button v-else class="button" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">一键获取微信绑定号码</button>
				</view>
				<view class="item">
					<view class="name">
						*性别
					</view>
					<view class="radio">
						<u-radio-group v-model="sex">
							<u-radio active-color="#000000" shape="square" v-for="(item, index) in list" :key="index"
								:name="item.name">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>

				</view>
				<view class="rules">
					<u-checkbox active-color="#000000" v-model="checked"></u-checkbox>
					<view class="innerWord">我同意依本 <text>使用条款</text> 和 <text>隐私政策</text> 对我的个人信息进行收集和使用，我已阅读并确认已充分理解该
						使用条款 和 隐私政策 内容</view>
				</view>
				<view class="tips1">*如需修改必填项个人信息，请联系在线客服</view>
				<view @click="register" class="btns">确认注册</view>
			</view>
		</view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				avatarUrl: '',
				avatarUrl1: '',
				nickName: "",
				phone: "",
				sex: "男",
				code: "",
				checked: false,
				list: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},

				]
			}
		},

		onLoad() {
			let that = this
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log(loginRes,8888854);
					that.code = loginRes.code
					
				}
			});
		},
		methods: {
			onBlur(e){
				this.nickName = e.detail.value
			},
			
			register(){
				if(!this.nickName){
					uni.showToast({
						icon:'none',
						title:"请完善用户名"
					})
					return
				}
				if(!this.phone){
					uni.showToast({
						icon:'none',
						title:"请完善手机号"
					})
					return
				}
				if(!this.avatarUrl1){
					uni.showToast({
						icon:'none',
						title:"请完善您的头像"
					})
					return
				}
				if(!this.checked){
					uni.showToast({
						icon:'none',
						title:"请阅读并同意条款！"
					})
					return
				}
						let that = this;	
			
			
				this.$u.api
					.userModify({
						nickname: this.nickName,
						mobile: this.phone,
						gender:this.sex=='男'?1:2 ,//男1女2
						headimg:this.avatarUrl1
						
					})
					.then((res) => {
							console.log(res?.data?.mobile,'8888888888888');
							
							if(res.code===0){
								that.$u.toast('注册成功!');
								that.$u.vuex("vuex_phone", res?.data?.mobile);
								// that.$u.vuex("vuex_token", res.token);
								that.$u.vuex("vuex_sex", res?.data?.gender);
								
								that.$u.vuex("vuex_nickname", res?.data?.nickname);
								that.$u.vuex("vuex_headimg", res?.data?.headimg);
								
								// uni.setStorageSync('baseInfo', res?.data);
								setTimeout(()=>{
									uni.navigateBack()
								},1500)
							}else{
								that.$u.toast(res.msg);
							}
							
					});
			},
			//授权手机号登录
			decryptPhoneNumber(e) {
				var that = this
				// #ifdef MP-WEIXIN
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					if (e.detail.iv) {
					
							let {
								encryptedData,
								iv
							} = e.detail
							
							
						
							
							that.$u.api
								.updateusermobile({
									code: that.code,
									encryptedData,
									iv
								})
								.then((res) => {
									that.phone = res.phoneNumber
								});
							
						
					


					} else {
						// 授权失败请使用验证码登录
					
						uni.showToast({
							title: '请使用手机号登录',
							icon: 'none'
						});
					}
				}
				// #endif
			},

			onChooseAvatar(e) {

				//该图片需要上传到自己服务器--此处没做处理
				
				this.avatarUrl = e.detail.avatarUrl;
				
				uni.uploadFile({
					url: this.vuex_config.baseUrl + '/api/util/fileupload',
					header: {
						'content-type': 'multipart/form-data',
						'Authorization':'Bearer '+this.vuex_token
					},
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {
						'file': e.detail.avatarUrl
					},
					success: (uploadFileRes) => {
						
						
						this.avatarUrl1 = 'http://file.roumeiji.com' + JSON.parse(uploadFileRes.data)[0].url;
					}
				});

			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 138rpx;
	}

	.item {
		margin: 0 66rpx 14rpx;
		height: 88rpx;
		border: 1px solid #000000;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.name {
			padding-left: 31rpx;
			padding-right: 56rpx;
			min-width: 95px;

			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #000000;
		}

		input,
		button,
		.radio {
			flex: 1;
			margin-right: 61rpx;
		}
		.phone{
			flex: 1;
		}

		/deep/ button {
			height: 46rpx;
			background: #000000 !important;
			border-radius: 0 !important;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.btns {

		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #F4F4F4;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 67rpx auto 138rpx;
		width: 618rpx;
		height: 82rpx;
		background: linear-gradient(90deg, #3C9226, #1F6F0E);
		border-radius: 41rpx;
	}

	.rules {
		margin: 0 66rpx 27rpx;
		display: flex;

		.innerWord {
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #595959;
			line-height: 33rpx;
			text-align: justify;

			text {
				padding: 0 2px;
				text-decoration: underline;
			}
		}
	}

	/deep/ .u-checkbox {
		display: flex !important;
	}

	/deep/ .u-checkbox__label {
		margin-left: 0 !important;
	}

	.tips1 {

		font-size: 10px;
		transform: scale(0.8);
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #595959;
		text-align: center;
	}

	/deep/.u-radio__label {
		padding-right: 70rpx;
	}

	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.logo {
		display: block;
		width: 410rpx;
		height: 55rpx;
		margin: 127rpx auto 0;
	}


	.title {
		height: 40rpx;
		font-size: 42rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		text-align: center;
		margin: 79rpx 0 39rpx;
	}

	.avatar-wrapper {
		width: 178rpx;
		height: 178rpx;
		padding: 0;
		// border-radius: 50%;

	}

	/deep/ button::after {
		border: none !important;
	}

	/deep/ button {
		border-radius: 50%;
		background-color: transparent !important;
	}

	.photo {
		display: block;
		width: 178rpx;
		height: 178rpx;
		margin: 0 auto 9rpx;
	}

	.tips {
		text-align: center;
		margin-bottom: 40rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		line-height: 51rpx;
	}
</style>
